<template>
  <div class="home-singers">
    <h3>热门歌手</h3>
    <div class="wrapper" ref="wrapper">
  <ul class="content" ref="content">
    <li v-for="(item, index) in listData" :key="index" @click="selectItem(item)">
        <div class="cover">
          <van-image :src="item.singer_pic" radius="10"/>
        </div>
        <span>{{ item.singer_name }}</span>
      </li>
  </ul>
  </div>
  </div> 
</template>

<script>
import { betterScrollHorizontal } from "../../common/betterScroll.js"
export default {
  data() {
    return {
      listData:[],
      pageNo: 1, //歌单返回页码
      pageSize: 6, //歌单每页返回数量
      sort:5
    }
  },
  created() {
    this.getData(this.pageNo,this.pageSize,this.sort)
  },
  methods: {
    //获取推荐歌单数据
    getData(pageNo,pageSize,sort) {
      this.$request('get','/singer/list',{
        pageNo,
        pageSize,
        sort
      })
      .then(res=> {
        console.log(res)
        if (res.result == 100) { 
          this.listData = res.data.list;
        }
        betterScrollHorizontal(
          this,
          this.$refs.wrapper,
          this.$refs.content,
          this.listData.length,
          10
          );
      })
    }, 
    selectItem(item) {
       const singermid = item .singer_mid;
       this.$store.commit('saveSinger',item)
       this.$router.push({path: `/singer/${singermid}`}) 
       
      },
  },
}
</script>

<style scoped>
.cover{
    position: relative;
}

.cover{
  position: relative;
}
.wrapper {
width: 100%;/*容器的宽度就是屏幕的宽度*/
overflow: hidden;
}

ul.content > li {
display: inline-block;
width: 10rem;
vertical-align: top;  /**垂直方向的对齐**/
}

/**li里面有两个元素:div和span，所以使用通配符**/
ul.content > li * {
margin:0 0.1rem;
/*里面的元素与li的边缘有个间距*/
}
ul.content > li > span {
font-size: 0.8rem;
color:#626858;
}
</style>
